<div id="identity-roles-wrapper" class="card">
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title">{{ 'AbpIdentity::Roles' | abpLocalization }}</h5>
      </div>
      <div class="text-right col col-md-6">
        <button
          *abpPermission="'AbpIdentity.Roles.Create'"
          id="create-role"
          class="btn btn-primary"
          type="button"
          (click)="add()"
        >
          <i class="fa fa-plus mr-1"></i>
          <span>{{ 'AbpIdentity::NewRole' | abpLocalization }}</span>
        </button>
      </div>
    </div>
  </div>

  <div class="card-body">
    <abp-table
      *ngIf="[150, 0] as columnWidths"
      [abpLoading]="loading"
      [abpLoadingDelay]="500"
      [abpTableSort]="{ key: sortKey, order: sortOrder }"
      [colgroupTemplate]="tableColGroup"
      [headerTemplate]="tableHeader"
      [bodyTemplate]="tableBody"
      [value]="data$ | async"
      [rows]="pageQuery.maxResultCount"
      [totalRecords]="totalCount$ | async"
      [scrollable]="true"
      (pageChange)="onPageChange($event)"
    >
      <ng-template #tableColGroup>
        <colgroup>
          <col *ngFor="let width of columnWidths" [ngStyle]="{ 'width.px': width || undefined }" />
        </colgroup>
      </ng-template>
      <ng-template #tableHeader>
        <tr>
          <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
          <th (click)="sortOrderIcon.sort('name')">
            {{ 'AbpIdentity::RoleName' | abpLocalization }}
            <abp-sort-order-icon
              #sortOrderIcon
              sortKey="name"
              [(selectedSortKey)]="sortKey"
              [(order)]="sortOrder"
            ></abp-sort-order-icon>
          </th>
        </tr>
      </ng-template>
      <ng-template #tableBody let-data>
        <tr>
          <td class="text-center">
            <div ngbDropdown container="body" class="d-inline-block">
              <button
                class="btn btn-primary btn-sm dropdown-toggle"
                data-toggle="dropdown"
                aria-haspopup="true"
                ngbDropdownToggle
              >
                <i class="fa fa-cog mr-1"></i>{{ 'AbpIdentity::Actions' | abpLocalization }}
              </button>
              <div ngbDropdownMenu>
                <button
                  *abpPermission="'AbpIdentity.Roles.Update'"
                  ngbDropdownItem
                  (click)="edit(data.id)"
                >
                  {{ 'AbpIdentity::Edit' | abpLocalization }}
                </button>
                <button
                  *abpPermission="'AbpIdentity.Roles.ManagePermissions'"
                  ngbDropdownItem
                  (click)="providerKey = data.name; visiblePermissions = true"
                >
                  {{ 'AbpIdentity::Permissions' | abpLocalization }}
                </button>
                <button
                  *ngIf="!data.isStatic"
                  [abpPermission]="'AbpIdentity.Roles.Delete'"
                  ngbDropdownItem
                  (click)="delete(data.id, data.name)"
                >
                  {{ 'AbpIdentity::Delete' | abpLocalization }}
                </button>
              </div>
            </div>
          </td>
          <td>
            {{ data.name
            }}<span *ngIf="data.isDefault" class="badge badge-pill badge-success ml-1">{{
              'AbpIdentity::DisplayName:IsDefault' | abpLocalization
            }}</span>
            <span *ngIf="data.isPublic" class="badge badge-pill badge-info ml-1">{{
              'AbpIdentity::DisplayName:IsPublic' | abpLocalization
            }}</span>
          </td>
        </tr>
      </ng-template>
    </abp-table>
  </div>
</div>

<abp-modal size="md" [(visible)]="isModalVisible" [busy]="modalBusy">
  <ng-template #abpHeader>
    <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
  </ng-template>

  <ng-template #abpBody>
    <form #formRef [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
      <div class="form-group">
        <label for="role-name">{{ 'AbpIdentity::RoleName' | abpLocalization }}</label
        ><span> * </span>
        <input autofocus type="text" id="role-name" class="form-control" formControlName="name" />
      </div>

      <div class="custom-checkbox custom-control mb-2">
        <input
          type="checkbox"
          id="role-is-default"
          class="custom-control-input"
          formControlName="isDefault"
        />
        <label class="custom-control-label" for="role-is-default">{{
          'AbpIdentity::DisplayName:IsDefault' | abpLocalization
        }}</label>
      </div>

      <div class="custom-checkbox custom-control mb-2">
        <input
          type="checkbox"
          id="role-is-public"
          class="custom-control-input"
          formControlName="isPublic"
        />
        <label class="custom-control-label" for="role-is-public">{{
          'AbpIdentity::DisplayName:IsPublic' | abpLocalization
        }}</label>
      </div>
    </form>
  </ng-template>

  <ng-template #abpFooter>
    <button type="button" class="btn btn-secondary" #abpClose>
      {{ 'AbpIdentity::Cancel' | abpLocalization }}
    </button>
    <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="onClickSaveButton()">{{
      'AbpIdentity::Save' | abpLocalization
    }}</abp-button>
  </ng-template>
</abp-modal>

<abp-permission-management
  #abpPermissionManagement="abpPermissionManagement"
  *abpReplaceableTemplate="
    {
      inputs: {
        providerName: { value: 'R' },
        providerKey: { value: providerKey },
        visible: { value: visiblePermissions, twoWay: true },
        hideBadges: { value: true }
      },
      outputs: { visibleChange: onVisiblePermissionChange },
      componentKey: 'PermissionManagement.PermissionManagementComponent'
    };
    let init = initTemplate
  "
  (abpInit)="init(abpPermissionManagement)"
>
</abp-permission-management>
